<style type="text/css">
.hiddenRow {
    padding: 0 !important;
}
.well-collapse{
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
}
    #preview{
        position:absolute;
        border:1px solid #ccc;
        background:#333;
        padding:5px;
        display:none;
        color:#fff;
    }
.select-red{
    background-color: #eaeaea;    
}
.select-white{
    background-color: white;    
}

</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('.room_image_btn').on( "click", function() {
            $(this).addClass('hide_room_image_btn');
            $(this).removeClass('room_image_btn');
            if($(this).data('action') == 'show'){
                $($(this).data('target')).show();
                $(this).data('action','hide');
                $(this).text('hide');
            }else{
                $($(this).data('target')).hide();
                $(this).data('action','show');
                $(this).text('preview');
            }
        });
    })
</script>

<script type="text/javascript">
    this.imagePreview = function(){ 
        /* CONFIG */
            
            xOffset = 10;
            yOffset = 30;
            
            // these 2 variable determine popup's distance from the cursor
            // you might want to adjust to get the right result
            
        /* END CONFIG */
        $("a.preview").hover(function(e){
            this.t = this.title;
            this.title = "";    
            var c = (this.t != "") ? "<br/>" + this.t : "";
            $(this).append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px")
                .fadeIn("fast");                        
        },
        function(){
            this.title = this.t;    
            $("#preview").remove();
        }); 
        $("a.preview").mousemove(function(e){
            $("#preview")
                .css("top",(e.pageY - xOffset) + "px")
                .css("left",(e.pageX + yOffset) + "px");
        });         
    };

    // starting the script on page load
    $(document).ready(function(){
        imagePreview();
            
        $('.room-select').change(function(e){
            if($(this).val()=='0'){
                $(this).addClass('select-white');
            }else{
                $(this).addClass("select-red");
            }

        })
    });
</script>

<section id="content" class="cols-a">
    <article class="vcard">
        <header class="module-a">
            <h2 class="fn org"><%= @hotel.hotel_name %></h2>
            <p class="rating-a <%= hotel_star(@hotel.stars) %>">0/5</p>
            <p class="link"><a href="./">Return</a></p>
            <p class="addthis_toolbox addthis_default_style addthis_16x16_style"><span>Share:</span> <a class="addthis_button_email"></a> <a class="addthis_button_facebook"></a> <a class="addthis_button_twitter"></a></p>
        </header>
        <div class="slider-a">
            <% @hotel_images.each do |hi| %>
                <figure><%= image_tag hi.image.url(:large)  %></figure>
            <% end %>
        </div>
        <div class="tabs-a">
            <ul>
                <li>Overview</li>
                <li>Facilities</li>
            </ul>
            <div>
                <div>
                    <%= raw(@hotel.description_eng)  %>
                    <ul class="list-b">
                        <li><span>Check - In Time:</span> <%= @hotel.check_in_time.strftime('%H:%M') %></li>
                        <li><span>Check - Out Time:</span> <%= @hotel.check_out_time.strftime('%H:%M') %></li>
                    </ul>
                    <p class="adr"><span class="street-address"><%= @hotel.address %></span>, <span class="locality"><%= @hotel.area.area %></span>, <span class="country-name"><%= @hotel.province.province_name %></span></p>
                </div>
                <div>
                    <h3>Facilities</h3>
                    <div class="triple-a">
                        <% @a = 1 %>
                        <% @hotel.hotel_facilities.each do |hf| %>
                            <% if @a == 1 %>
                                <ul>
                                <li><%= hf.facility.facility_name_eng %></li>
                                <% @a = @a + 1 %>
                            <% else %>
                                <li><%= hf.facility.facility_name_eng %></li>
                                <% @a = @a + 1 %>
                                <% if @a == 4 %>
                                    </ul>
                                    <% @a = 1 %>
                                <% end %>
                            <% end %>
                        <% end %>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabs-a">
            <ul>
                <li>Room Type</li>
            </ul>
            <%= form_tag "#" do %>
                <table>
                    <tr>
                        <th><b>Room Type</b></th>
                        <th><b>Max Persons</b></th>
                        <th><b>Price</b></th>
                        <th><b>Rooms</b></th>
                    </tr>
                    <% @hotel.hotel_room_types.each do |hrt| %>
                        <tr >
                            <td>
                                <div class="span1">
                                    <figure> <%= image_tag hrt.primary_picture.url(:small) %></figure>
                                </div>
                                <div class="span1 room-info">
                                    <%= hrt.room_name %> 
                                    <a data-action="show" data-target="#RoomInfo_<%= hrt.id %>" class="room_image_btn" value="show">preview</a>   
                                </div>
                            </td>
                            <td><% (1..hrt.max_guest).each do |a| %>
                                    <%= image_tag "person.png" %>
                                <% end %>
                            </td>
                            <td><%= number_to_currency(hrt.usd_price, :unit => "$. ", :delimiter => "," ,:precision => 0 ) %></td>
                            <td><%= select("room_type", hrt.room_name,((0..hrt.max_room.to_i).map {|i| [i,i] }), {}, :style => "width:60px", class: "room-select") %></td>
                        </tr>
                        <tr >
                            <td colspan="6" class="hiddenRow">
                            <div id="RoomInfo_<%= hrt.id %>" class="well-collapse" id="demo_<%= hrt.id %>" style="display:none">
                                <table class="table">
                                    <tr class="well-collapse">
                                        <td>
                                            <b>Room Image</b>                                     
                                        </td>                                            
                                    </tr>
                                    <tr style="background-color:white">
                                        <td>
                                            <% hrt.hotel_room_type_images.each do |hrti| %>
                                                <a href="<%= hrti.image.url(:large) %>" class="preview" title="<%= hrti.description_eng %>"><%= image_tag hrti.image.url(:small), alt: "gallery thumbnail" %></a>
                                            <% end %>                            
                                        </td>
                                    </tr>
                                    <tr class="well-collapse">
                                        <th>
                                            <b>Room Facilities</b>                                     
                                        </th>                                            
                                    </tr>
                                    <tr style="background-color:white">
                                        <td>
                                            <div>
                                                <% hrt.room_type_facilities.each do |room| %>
                                                    <%= room.room_facility.facility_name_eng %>
                                                <% end %>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            </td>
                        </tr>
                    <% end %>
                </table>
                <%= button_tag "BOOK", class: "btn btn-large btn-primary" %>
            <% end %>
        </div> 
    </article>
    <aside>
        <p class="scheme-b">Price From <span> <%= number_to_currency(@hotel.hotel_room_types.minimum("usd_price"), :unit => "$. ", :delimiter => "," ,:precision => 0 )  %> <span>/ Night</span></span></p>
        <form action="./" method="post" class="form-a">
            <fieldset>
                <legend>Booking form</legend>
                <p class="date-a">
                    <span>
                        <label for="faa">Check in</label>
                        <input type="text" id="faa" name="faa" required>
                    </span>
                    <span>
                        <label for="fab">Check Out</label>
                        <input type="text" id="fab" name="fab" required>
                    </span>
                </p>
                <p class="submit"><button type="submit">Check Price</button></p>
            </fieldset>
        </form>
    </aside>
</section>